import React,{Component} from 'react';
import styles from './styles.less';
import { Progress } from "antd";

class Index extends Component{
    constructor(props){
        super(props);
        this.state={
        newData:[],
        }
    }
    render(){
        const {newData}=this.state;
        const { alarmStatistics } = this.props;
        const data1 =alarmStatistics.grandTotalWarning<100 ? alarmStatistics.grandTotalWarning : (1000<alarmStatistics.grandTotalWarning<10000 ? alarmStatistics.grandTotalWarning/100: alarmStatistics.grandTotalWarning/1000);
        const data2 =alarmStatistics.manualScreening<100 ? alarmStatistics.manualScreening :(1000<alarmStatistics.manualScreening<10000 ? alarmStatistics.manualScreening/100: alarmStatistics.manualScreening/1000);
        const data3 =alarmStatistics.dispatchStatistics<100 ? alarmStatistics.dispatchStatistics : (1000<alarmStatistics.dispatchStatistics<10000 ? alarmStatistics.dispatchStatistics/100: alarmStatistics.dispatchStatistics/1000);
        const data4 =alarmStatistics.policeFeedback<100 ? alarmStatistics.policeFeedback : (1000<alarmStatistics.policeFeedback<100000 ? alarmStatistics.policeFeedback/100: alarmStatistics.policeFeedback/1000);
        return(
            <div className={styles.div_body}>
                <div className={styles.div_body_title}>
                    <h3>告警统计</h3>
                </div>
                <div className={styles.div_body_connect}>
                    <div className={styles.div_body_connect1}>
                        <div className={styles.div_body_connect1_top}>
                            <div><span>累计告警</span></div>
                            <div><h3>{alarmStatistics.grandTotalWarning}</h3></div>
                        </div>
                        <div className={styles.div_body_connect1_bottom}>
                            <Progress
                                 strokeColor={{
                                    from: "red",
                                    to: " rgb(221, 75, 55)",
                                  }}
                                status="active"
                                percent={data1}
                                strokeWidth={10}
                            />
                        </div>
                    </div>
                    <div className={styles.div_body_connect1}>
                        <div className={styles.div_body_connect1_top}>
                            <div>
                                <span>人工甄别</span>
                            </div>
                            <div>
                                <h3>{alarmStatistics.manualScreening}</h3>
                            </div>
                        </div>
                        <div className={styles.div_body_connect1_bottom}>
                            <Progress
                                strokeColor={{
                                from: "#108ee9",
                                to: "#87d068",
                                }}
                                status="active"
                                percent={data2}
                                strokeWidth={10}
                             


                            />
                        </div>
                    </div>
                    <div className={styles.div_body_connect1}>
                        <div className={styles.div_body_connect1_top}>
                            <div>
                                <span>派警</span>
                            </div>
                            <div>
                                <h3>{alarmStatistics.dispatchStatistics}</h3>
                            </div>
                        </div>
                        <div className={styles.div_body_connect1_bottom}>
                            <Progress
                                strokeColor={{
                                from: "rgb(47, 135, 236)",
                                to: "rgb(17, 88, 194)",
                                }}
                                status="active"
                                percent={data3}
                                strokeWidth={10}

                            />
                        </div>
                    </div>
                    <div className={styles.div_body_connect1}>
                        <div className={styles.div_body_connect1_top}>
                        <div>
                            <span>派警反馈</span>
                        </div>
                        <div>
                            <h3>{alarmStatistics.policeFeedback}</h3>
                        </div>
                        </div>
                        <div className={styles.div_body_connect1_bottom}>
                            <Progress
                                 strokeColor={{
                                    from: "red",
                                    to: " rgb(221, 75, 55)",
                                  }}
                                status="active"
                                percent={data4} 
                                strokeWidth={10}
                            />
                        </div>
                    </div>  
                </div>
            </div>
        )
    }

}
export default Index;
